import React, { useState } from 'react';
import SuperCascader, { CascaderOption, ILoadDataFn } from './SuperCascader';

const optionLists: CascaderOption[] = [
  {
    label: 'aaa',
    value: 1,
    isLeaf: false,
  },
  {
    label: 'bbb',
    value: 2,
    isLeaf: false,
  },
  {
    label: 'ccc',
    value: '3',
    isLeaf: false,
    // disabled: true,
  },
];

interface Props {
  disabled?: boolean;
}

const CategoryProjectCascader: React.FC<Props> = (props) => {
  const { disabled } = props;

  // 处理加载下级数据（选择、编辑时可用）
  const handleLoadData = (params: ILoadDataFn) => {
    const { value, callback } = params;
    console.log('加载下级数据', value);

    // 子级数据装到array中
    const result: CascaderOption[] = [];
    const res = [
      {
        label: `Dynamic ${+new Date()} 1`,
        value: 99,
      },
      {
        label: `Dynamic ${+new Date()}`,
        value: 100,
      },
    ];

    res.map((item) => {
      result.push(Object.assign(item, { isLeaf: true }));
    });

    // 再传给回调函数
    if (callback) {
      callback(result);
    }
  };

  const handleChange = (value: (string | number)[], selectedOptions: CascaderOption[]) => {
    console.log(value, selectedOptions);
  };

  return (
    <SuperCascader
      placeholder="请选择业务线/项目"
      disabled={disabled}
      options={optionLists}
      loadDataFn={handleLoadData}
      onChange={handleChange}
    />
  );
};

export default CategoryProjectCascader;
